<template>
  <div class="article-add">
    <h1>添加文章</h1>
    <el-form :model="form" label-width="120px">
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="URL 别名">
        <el-input v-model="form.slug" />
      </el-form-item>
      <el-form-item label="语雀 URL">
        <el-input v-model="form.sourceUrl" />
      </el-form-item>
      <el-form-item label="嵌入参数">
        <el-input v-model="form.embedQuery" />
      </el-form-item>
      <el-form-item label="分类">
        <el-tree-select
          v-model="form.categoryId"
          :data="categoryTree"
          :props="treeProps"
          placeholder="请选择分类"
          check-strictly
          clearable
        />
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="form.authorName" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.status" placeholder="请选择状态">
          <el-option label="草稿" value="draft" />
          <el-option label="已发布" value="published" />
          <el-option label="已归档" value="archived" />
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker
          v-model="form.publishedAt"
          type="datetime"
          placeholder="选择发布时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

interface Category {
  id: number; // 分类ID
  name: string; // 分类名称
  slug: string; // URL别名
  description?: string; // 分类描述（可选）
  parentId?: number | null; // 父分类ID（可选）
  order?: number; // 排序字段（可选）
  children?: Category[]; // 子分类（树状结构）
}

export default defineComponent({
  name: 'ArticleAdd',
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance() as any; // 获取当前组件实例

    // 表单数据
    const form = reactive({
      title: '',
      slug: '',
      sourceUrl: '',
      embedQuery: '?view=doc_embed&from=anything', // 默认嵌入参数
      embedType: 'doc', // 默认文档类型
      authorName: '',
      status: 'draft', // 默认状态
      publishedAt: '', // 发布时间
      categoryId: null, // 分类ID
    });

    // 分类树数据
    const categoryTree = ref<Category[]>([]);

    // 树形选择器配置
    const treeProps = {
      label: 'name', // 显示的名称字段
      value: 'id',   // 绑定的值字段
      children: 'children', // 子节点字段
    };

    // 将扁平数据转换为树形结构
    const buildTree = (categories: Category[], parentId: number | null = null): Category[] => {
      return categories
        .filter((category) => category.parentId === parentId) // 使用 parentId 而不是 parent_id
        .map((category) => ({
          ...category,
          children: buildTree(categories, category.id), // 递归构建子分类
        }));
    };

    // 加载分类树数据
    const loadCategoryTree = async () => {
      try {
        const response = await proxy.$axios.get('/api/categories/tree');
        console.log('API 返回的数据:', response.data); // 打印原始数据
        if (response.data) {
          // 将扁平数据转换为树形结构
          categoryTree.value = buildTree(response.data);
          console.log('转换后的树形数据:', categoryTree.value); // 打印树形数据
        } else {
          ElMessage.error('加载分类失败');
        }
      } catch (error) {
        ElMessage.error('加载分类失败');
      }
    };

    // 提交表单
    const handleSubmit = async () => {
      if (!form.categoryId) {
        ElMessage.error('请选择分类');
        return;
      }

      try {
        // 使用全局的 $axios 实例发送 POST 请求
        const response = await proxy.$axios.post('/api/articles', form);
        if (response.data) {
          ElMessage.success('添加成功');
          router.push('/admin/articles'); // 返回文章列表
        } else {
          ElMessage.error('添加失败');
        }
      } catch (error) {
        ElMessage.error('添加失败');
      }
    };

    // 取消
    const handleCancel = () => {
      router.push('/admin/articles'); // 返回文章列表
    };

    // 组件挂载时加载分类数据
    onMounted(() => {
      loadCategoryTree();
    });

    return {
      form,
      categoryTree,
      treeProps,
      handleSubmit,
      handleCancel,
    };
  },
});
</script>

<style scoped>
.article-add {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>